<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" title="驾校报名列表" hidden-breadcrumb>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt listbox">
      <Form
        ref="userFrom"
        :model="userFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="16">
          <Col span="18">
            <Col span="24">
              <Col v-bind="grid">
                <FormItem label="用户搜索：" label-for="nickname">
                  <Input
                    v-model="userFrom.nickname"
                    placeholder="请输入"
                    element-id="nickname"
                    clearable
                  >
                    <Select
                      v-model="field_key"
                      slot="prepend"
                      style="width: 80px"
                    >
                      <Option value="all">全部</Option>
                      <Option value="uid">UID</Option>
                      <Option value="phone">手机号</Option>
                      <Option value="name">用户名字</Option>
                      <Option value="spread_uid">推广人UID</Option>
                      <Option value="spread_phone">推广人手机号</Option>
                    </Select>
                  </Input>
                </FormItem>
              </Col>
            </Col>
          </Col>
    
          <Col span="6" class="ivu-text-right userFrom">
            <FormItem>
              <Button
                type="primary"
                icon="ios-search"
                label="default"
                class="mr15"
                @click="userSearchs"
                >搜索</Button
              >
              <Button class="ResetSearch" @click="reset('userFrom')"
                >重置</Button
              >
      
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="Button">
        <Tooltip content="导出数据" :disabled="!!userLists.length">
          <Button
            class="export"
            icon="ios-share-outline"
            @click="exports"
            >导出</Button
          >
        </Tooltip>
      </div>
      
      <Table
        :columns="columns"
        :data="userLists"
        class="mt25"
        ref="table"
        highlight-row
        :loading="loading"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
  
      >
      <template slot-scope="{ row, index }" slot="sexType">
        <div>{{ row.sex==1 ? "男" : "女" }}</div>
      </template>
        <template slot-scope="{ row, index }" slot="avatars">
          <viewer>
            <div class="tabBox_img">
              <img v-lazy="row.avatar" />
            </div>
          </viewer>
        </template>
        <template slot-scope="{ row, index }" slot="nickname">
          <div class="acea-row">
            <Icon
              type="md-male"
              v-show="row.sex === '男'"
              color="#2db7f5"
              size="15"
              class="mr5"
            />
            <Icon
              type="md-female"
              v-show="row.sex === '女'"
              color="#ed4014"
              size="15"
              class="mr5"
            />
            <div v-text="row.nickname"></div>
          </div>
          <!-- <div v-show="row.vip_name" class="vipName">{{row.vip_name}}</div> -->
        </template>
        <template slot-scope="{ row, index }" slot="isMember">
          <div>{{ row.isMember ? "是" : "否" }}</div>
        </template>
        <!--                <template slot-scope="{ row, index }" slot="status">-->
        <!--                    <i-switch v-model="row.status" :value="row.status" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">-->
        <!--                        <span slot="open">显示</span>-->
        <!--                        <span slot="close">隐藏</span>-->
        <!--                    </i-switch>-->
        <!--                </template>-->
        <template slot-scope="{ row, index }" slot="action">
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
          <template>
            <Dropdown @on-click="changeMenu(row, $event, index)">
              <a href="javascript:void(0)">
                更多
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem name="1">账户详情</DropdownItem>
                <DropdownItem name="2">积分余额</DropdownItem>
                <DropdownItem name="3">赠送会员</DropdownItem>
                <!-- <DropdownItem name="4" v-if="row.vip_name">清除等级</DropdownItem> -->
                <DropdownItem name="5">设置分组</DropdownItem>
                <DropdownItem name="6">设置标签</DropdownItem>
                <DropdownItem name="7">修改上级推广人</DropdownItem>
                <DropdownItem name="8" v-if="row.spread_uid"
                  >清除上级推广人</DropdownItem
                >
              </DropdownMenu>
            </Dropdown>
          </template>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="userFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="userFrom.limit"
        />
      </div>
    </Card>

   
   
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  userList,
  getUserData,
  isShowApi,
  editOtherApi,
  giveLevelApi,
  userSetGroup,
  userGroupApi,
  levelListApi,
  userSetLabelApi,
  userLabelApi,
  userSynchro,
  getUserSaveForm,
  giveLevelTimeApi,
} from "@/api/user";
import { getjiaxiaoList, exportJiaxiaoList } from "@/api/agent";
import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "user_list",
  components: {
  },
  data() {
    return {
      labelShow: false,
      customerShow: false,
      promoterShow: false,
      labelActive: {
        uid: 0,
      },
      formInline: {
        uid: 0,
        spread_uid: 0,
        image: "",
      },
      collapse: false,
      address: [],
      isShowSend: true,
      modal13: false,
      maxCols: 4,
      scrollerHeight: "600",
      contentTop: "130",
      contentWidth: "98%",
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      grid2: {
        xl: 18,
        lg: 16,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      total: 0,
      userFrom: {
        nickname: "",
        page: 1,
        limit: 15,
        field_key: "",
      },
      field_key: "",
      level: "",
      group_id: "",
      label_id: "",
      user_time_type: "",
      pay_count: "",
      columns: [
        // {
        //     type: 'selection',
        //     width: 60,
        //     align: 'center'
        // },
       
        {
          title: "UID",
          key: "uid",
          width: 80,
        },
        {
          title: "头像",
          slot: "avatars",
          minWidth: 60,
        },
        {
          title: "昵称",
          slot: "nickname",
          minWidth: 150,
        },
        {
          title: "手机号",
          key: "phone",
          minWidth: 100,
        },
        {
          title: "身份证号",
          key: "card_id",
          minWidth: 100,
        },
        {
          title: "学校",
          key: "school",
          minWidth: 100,
        },
        {
          title: "性别",
          slot: "sexType",
          align: "center",
          minWidth: 80,
        },
        {
          title: "推广人姓名",
          key: "spread_real_name",
          minWidth: 100,
        },
        {
          title: "推广人手机号",
          key: "spread_phone",
          minWidth: 100,
        }
      ],
      userLists: [],
      FromData: null,
      selectionList: [],
      user_ids: "",
      selectedData: [],
      timeVal: [],
      array_ids: [],
      groupList: [],
      levelList: [],
      labelFrom: {
        page: 1,
        limit: "",
      },
      labelLists: [],
      display: "none",
      checkBox: false,
      selectionCopy: [],
      isAll: -1,
    };
  },
  watch: {
 
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 100;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    // this.userGroup();
    // this.levelLists();
    // this.groupLists();
  },
  methods: {

 
    // 会员列表
    getList() {
      this.loading = true;

      this.userFrom.field_key = this.field_key === "all" ? "" : this.field_key;
      getjiaxiaoList(this.userFrom)
        .then(async (res) => {
          let data = res.data;
          this.userLists = data.list
          this.total = data.count;
          // this.isAll = -1;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.userFrom.page = index;
      this.getList();
    },
    // 搜索
    userSearchs() {
      this.userFrom.page = 1;
      this.selectionList = [];
      this.getList();
    },
    // 重置
    reset(name) {
      this.userFrom = {
        nickname: "",
        field_key: "",
        page: 1, // 当前页
        limit: 20, // 每页显示条数
      };
      this.field_key = "";
      this.getList();
    },
  // 数据导出；
  async exports() {
        let [th, filekey, data, fileName] = [[], [], [], ""];
        let formValidate = this.userFrom;
        let lebData = await this.getExcelData(formValidate);
    
        if (!fileName) fileName = lebData.filename;
        if (!filekey.length) {
          filekey = lebData.filekey;
        }
        if (!th.length) th = lebData.header;
        if (lebData.export.length) {
          data = data.concat(lebData.export);
        }

        exportExcel(th, filekey, fileName, data);
      },
      getExcelData(excelData) {
        return new Promise((resolve, reject) => {
          exportJiaxiaoList(excelData).then((res) => {
            return resolve(res.data);
          });
        });
      },
    },
};
</script>

<style scoped lang="stylus">
.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  >>> .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: #1890FF;
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  >>> .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  >>>.ivu-divider-horizontal {
    margin: 0 !important;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}
/deep/.nickname{
  width: 150px;
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}
</style>
